<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <style>
        button {
            background: rgb(177, 171, 171);
            width: 120px;
            height: 60px;
            border: none;
        }

        div{
   
            float: left;
            margin-left: 40px;
        }
        .div1{
                     width: 500px;
            height: 300px;
            background: red;
            display: none;
        }
        img {
            float: left;
            width: 500px;
        }
    </style>
    <div>
    <button id="btn1">这是第一张</button><br>
    <button id="btn2">这是第二张</button><br>
    <button id="btn3">这是第三张</button><br>
    <button id="btn4">这是第四张</button><br>
    <button id="btn5">这是最后一张</button>
</div>
    <div id="div1" class="div1">
        <img src="./img/1.jpg" width="500" style="float: left;" id="a1">
    </div>
    <div id="div2" class="div1">
        <img src="./img/2.jpg" width="500" style="float: left;" id="a1">
    </div>
    <div id="div3" class="div1">
        <img src="./img/3.jpg" width="500" style="float: left;" id="a1">
    </div>
    <div id="div4" class="div1">
        <img src="./img/4.jpg" width="500" style="float: left;" id="a1">
    </div>
    <div id="div5" class="div1">
        <img src="./img/5.jpg" width="500" style="float: left;" id="a1">
    </div>
</body>
<script>
    btn1.onmouseover = function () {
        div1.style = 'display: block;'
        btn1.style = 'background : red;'

    }
    btn1.onmouseout = function (){
        div1.style = 'display: none;'
        btn1.style = 'background : rgb(177, 171, 171);'
    }
    btn2.onmouseover = function () {
        div2.style = 'display: block;'
        btn2.style = 'background : red;'

    }
    btn2.onmouseout = function (){
        div2.style = 'display: none;'
        btn2.style = 'background : rgb(177, 171, 171);'
    }

    btn3.onmouseover = function () {
        div3.style = 'display: block;'
        btn3.style = 'background : red;'

    }
    btn3.onmouseout = function (){
        div3.style = 'display: none;'
        btn3.style = 'background : rgb(177, 171, 171);'
    }
    btn4.onmouseover = function () {
        div4.style = 'display: block;'
        btn4.style = 'background : red;'

    }
    btn4.onmouseout = function (){
        div4.style = 'display: none;'
        btn4.style = 'background : rgb(177, 171, 171);'
    }
    btn5.onmouseover = function () {
        div5.style = 'display: block;'
        btn5.style = 'background : red;'

    }
    btn5.onmouseout = function (){
        div5.style = 'display: none;'
        btn5.style = 'background : rgb(177, 171, 171);'
    }
</script>

</html>